{extend name="public/common"}

{block name="style"}
<link rel="stylesheet" href="/home/css/structure/structure.css">
<title></title>
{/block}

{block name="body"}
<div class="scroll" style="position:absolute; overflow:scroll; -webkit-overflow-scrolling: touch; top:0; left:0; bottom:0; right:0">
<div class="banner">
    <img src="/home/images/structure/strcture.jpg" alt="组织架构banner" class="banner-img">
</div>
<div class="tabs">
    <div class="tabes">
        <a class="tab">组织介绍</a>
        <a class="tab">组织架构</a>
    </div>
</div>
<div class="listbox">
    <!--组织介绍-->
    <div class="service box active">
        <div class="box_ summary">
                {$info.content}
        </div>

    </div>
    <!--组织结构-->
    <div class="town box hidden">
        <!--小镇党委-->
        <div class="box_ or">
            <div class="lists">
                <!--第一层-->
                <div class="list clear">
                    <div class="party1">
                        <!--<div class="tri down"></div>-->
                        <div class="tri-left structure3"></div>
                        <div class="name1">伊川乡党支部</div>
                    </div>
                    <!--第二层-->
                    <div class="down detail1">
                        {volist name="$deps" id="d"}
                        <a class="name2 limit" href="{:Url('Structure/detail?id='.$d['id'])}">{$d.name}<span class="rt sj"></span></a>
                        {/volist}
                    </div>
                    <!--/第二层-->
                </div>
                <!--/第一层-->
            </div>
        </div>

        <!--/小镇党委-->
    </div>

</div>
</div>
{/block}

{block name="script"}
<script src="/home/js/reset.js"></script>
<script>
    $('title' ).text('组织架构');
    $(function(){
        //tab值记录
        tabRecord('.tab' ,'.box');
        //组织架构切换
        slide();
        //tab切换
        tabSwitch('.tab' ,'.box');

    });
    function slide(){
        $('.list .party1').on('click',function(){
            var it = $(this);
            var detail = it.next('.detail1');
            if(detail.hasClass('down')){
                detail.slideDown();
                it.find('.tri').removeClass('toup').addClass('todown');
            }else{
                detail.slideUp();
                it.find('.tri').removeClass('todown').addClass('toup');
            }
            detail.toggleClass('down');
        });

        $('.charter .party1').on('click',function(){
            var it = $(this);
            var detail = it.next('.detail1');
            if(detail.hasClass('down')){
                detail.slideDown();
                it.find('.tri').removeClass('toup').addClass('todown');
            }else{
                detail.slideUp();
                it.find('.tri').removeClass('todown').addClass('toup');
            }
            detail.toggleClass('down');
        });
    }

    var overscroll = function(el) {
        el.addEventListener('touchstart', function() {
            var top = el.scrollTop
                    , totalScroll = el.scrollHeight
                    , currentScroll = top + el.offsetHeight;
            if(top === 0) {
                el.scrollTop = 1;
            } else if(currentScroll === totalScroll) {
                el.scrollTop = top - 1;
            }
        });
        el.addEventListener('touchmove', function(evt) {
            if(el.offsetHeight < el.scrollHeight)
                evt._isScroller = true;
        });
    }

    overscroll(document.querySelector('.scroll'));
    document.body.addEventListener('touchmove', function(evt) {
        if(!evt._isScroller) {
            evt.preventDefault();
        }
    });

    var timeOutEvent=0;
    $(function(){
        $(".tab").each(function() {
            var that = $(this);
            $(this).on({
                touchstart: function (e) {
                    timeOutEvent = setTimeout(function(){
                        timeOutEvent = 0;
                        that.addClass("press");
                    }, 500);
                },
                touchmove: function () {
                    clearTimeout(timeOutEvent);
                    timeOutEvent = 0;
                    that.removeClass("press").addClass("ripple");
                },
                touchend: function () {
                    that.removeClass("press").addClass("ripple");
                    clearTimeout(timeOutEvent);
                    if (timeOutEvent != 0) {

                    }
                }
            })
        })
    });


</script>
{/block}